/**
 * Transforms
 * @module transforms
 * {@link http://www.w3.org/TR/css-transforms-1/ Specification}
 * =====================================================================================================================
 */

/**
 * Transform
 *
 * @example
 * .transform(translate(50px, 50px) scale(1.2) rotate(45deg));
 */
.transform(@value: none, @prop: transform, @dimension: 2d) {
    .transform-dimension() when (default()) {
        -webkit-@{prop}: @value; // Chrome 35-, Safari 8-, Opera 22-15
           -moz-@{prop}: @value; // Firefox 15-3.5
            -ms-@{prop}: @value; // IE 9
             -o-@{prop}: @value; // Opera 11.5
                @{prop}: @value; // Chrome 36+, Firefox 16+, IE 10+, Safari 9+, Opera 23+
    }

    .transform-dimension() when (@dimension = 3d) {
        -webkit-@{prop}: @value; // Chrome 35-12, Safari 8-4, Opera 22-15
           -moz-@{prop}: @value; // Firefox 15-10
                @{prop}: @value; // Chrome 36+, Firefox 16+, IE 10+, Safari 9+, Opera 23+
    }

    .transform-dimension();
}

/**
 * <Transform 2D Function>
 *
 * @example
 * .translate(50px, 50px;);
 * .scale(1.2);
 * .rotate(45deg);
 * .skew(20deg);
 */
.matrix(@value)     { .transform(matrix(@value)); }
.translate(@value)  { .transform(translate(@value)); }
.translateX(@value) { .transform(translateX(@value)); }
.translateY(@value) { .transform(translateY(@value)); }
.scale(@value)      { .transform(scale(@value)); }
.scaleX(@value)     { .transform(scaleX(@value)); }
.scaleY(@value)     { .transform(scaleY(@value)); }
.rotate(@value)     { .transform(rotate(@value)); }
.skew(@value)       { .transform(skew(@value)); }
.skewX(@value)      { .transform(skewX(@value)); }
.skewY(@value)      { .transform(skewY(@value)); }

/**
 * Flip <Direction>
 * {@link https://css-tricks.com/snippets/css/flip-an-image/ CSS Tricks}
 *
 * @example
 * .flip-horizontal();
 * .flip-vertical();
 */
.flip-horizontal() { .scaleX(-1); }
.flip-vertical()   { .scaleY(-1); }

/**
 * Transform <Property>
 *
 * @example
 * .transform-origin(left bottom);
 * .transform-style(preserve-3d);
 * .perspective(50px);
 * .perspective-origin(0% 100%);
 * .backface-visibility(hidden);
 */
.transform-origin(@value: 50% 50%)    { .transform(@value, transform-origin); }
.transform-style(@value: flat)        { .transform(@value, transform-style, 3d); }
.perspective(@value: none)            { .transform(@value, perspective, 3d); }
.perspective-origin(@value: 50% 50%)  { .transform(@value, perspective-origin, 3d); }
.backface-visibility(@value: visible) { .transform(@value, backface-visibility, 3d); }